<div class="page-header">
    <h1>
        Member
        <small>
            <i class="icon-double-angle-right"></i>
            Data Member

        </small>
    </h1>
</div>

<?php
if ($this->msg) {
    ?>
    <div class="alert alert-info">
        <button type="button" class="close" data-dismiss="alert">
            <i class="icon-remove"></i>
        </button>

        <strong>
            <i class="icon-ok"></i>
        </strong>

        <?php echo $this->msg; ?>
        <br />
    </div>
<?php
}


if ($this->errmsg) {
    ?>
    <div class="alert alert-danger">
        <button type="button" class="close" data-dismiss="alert">
            <i class="icon-remove"></i>
        </button>

        <strong>
            <i class="icon-remove"></i>

        </strong>

        <?php echo $this->errmsg; ?>
        <br />
    </div>
<?php
}
?>

<div class="row">
        <div class="col-xs-11">
            <!-- PAGE CONTENT BEGINS -->
            <form id="frm" class="form-horizontal" role="form" action="" method="post">
                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="regdate"> Tanggal Daftar </label>

                    <div class="col-sm-9">
                        <input type="text" class="col-xs-10 col-sm-5" name="regdate" id="regdate" value="<?php echo $this->regdate; ?>"></input>

                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="member_code"> Kode Member </label>

                    <div class="col-sm-9">
                        <input class="col-xs-10 col-sm-5" type="text" name="member_code" id="member_code"></input>

                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="member_name"> Nama Member </label>

                    <div class="col-sm-9">
                        <input class="col-xs-10 col-sm-5" type="text" name="member_name" id="member_name"></input>

                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="start_dat"> Alamat </label>

                    <div class="col-sm-9">
                        <input class="col-xs-10 col-sm-5" type="text" name="contact_address" id="contact_address"></input>
                        &nbsp;
                        <button class="btn btn-info btn-sm" type="button" onclick="cari()">
                            Cari
                        </button>
                    </div>
                </div>



        </form>
        <br/>

        <table id="grid-table"></table>

        <div id="grid-pager"></div>

        <script type="text/javascript">
                var $path_base = "<?php echo $this->url()?>";//this will be used in gritter alerts containing images
        </script>

        <br>
        <label class="col-sm-2 control-label no-padding"> Total Member </label>
        <div class="col-sm">
                <?php echo $this->totalMember;?>
        </div>
        
        <div id="detail-form" class="modal" tabindex="-1">
            <div class="modal-dialog">
                    <div class="modal-content">
                            <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h4 class="blue bigger">Detail Akun &nbsp;&nbsp;&nbsp;<img id="imgload" src="../img/loading.gif" width="20" height="20"/></h4>
                            </div>

                            <div class="modal-body overflow-visible">
                                <div class="row">

                                    <div class="col-xs-11" id="row-content">

                                        <form id="formWD" class="form-horizontal" role="form" action="" method="post">
                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="account_num"> Nomor Akun </label>
                                            <div class="col-sm-7">
                                                    <input type="text" id="account_num" name="account_num" placeholder="Nomor Akun" class="col-xs-10 col-sm-11"  readonly  />
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="account_name"> Nama Akun </label>
                                            <div class="col-sm-7">
                                                    <input type="text" id="account_name" name="account_name" placeholder="Nama Akun" class="col-xs-10 col-sm-11"  readonly  />
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="amount"> Saldo </label>

                                            <div class="col-sm-7">
                                                <input type="text" id="amount" name="amount" placeholder="Saldo" class="col-xs-10 col-sm-11" readonly/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                                <label class="col-sm-5 control-label no-padding-right" for="bank_name"> Nama Bank </label>

                                                <div class="col-sm-7">
                                                    <input type="text" id="bank_name" name="bank_name" placeholder="Nama Bank" class="col-xs-10 col-sm-11"  readonly  />
                                                </div>
                                            </div>
                                        <div class="form-group">
                                                <label class="col-sm-5 control-label no-padding-right" for="bank_acc_no"> No Akun Bank </label>

                                                <div class="col-sm-7">
                                                    <input type="text" id="bank_acc_no" name="bank_acc_no" placeholder="No Akun Bank" class="col-xs-10 col-sm-11"  readonly  />
                                                </div>
                                            </div>
                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="bank_acc_name"> Nama Akun Bank </label>

                                            <div class="col-sm-7">
                                                <input type="text" id="bank_acc_name" name="bank_acc_name" placeholder="Nama Akun Bank" class="col-xs-10 col-sm-11" readonly />
                                            </div>
                                        </div>                                        
                                        <div class="form-group">
                                            <label class="col-sm-5 control-label no-padding-right" for="bank_city_name"> Alamat Bank </label>

                                            <div class="col-sm-7">
                                                <textarea id="bank_city_name" name="bank_city_name" class="autosize-transition form-control" placeholder="Alamat Bank" readonly></textarea>

                                            </div>
                                        </div>
                                     </form>


                                    </div>

                                </div>
                            </div>

                            <div class="modal-footer">                                    
                                    <button class="btn btn-info btn-sm" id="closePop" data-dismiss="modal">
                                            <i class="icon-remove"></i>
                                            Close
                                    </button>
                            </div>
                    </div>
            </div>
    </div>

        <!-- PAGE CONTENT ENDS -->
    </div>
</div>
<script>

    var nowTemp = new Date();
    var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

    var satrtDate = $('#regdate').datepicker({
      format: 'yyyy-mm-dd'
    }).on('changeDate', function(ev) {
      satrtDate.hide();      
    }).data('datepicker');

    jQuery(function($) {

            jQuery('#grid-table').jqGrid({
                url:'<?php echo $this->url() ?>/../../jsondata/memberlist?regdate=<?php echo $this->regdate; ?>',
                datatype: "json",
                height: 150,
                colNames:['Kode Member','Nama', 'HP', 'Alamat', 'Detail'],
                colModel:[
                    {name:'Kode',index:'member_code'},
                    {name:'Nama',index:'member_name'},
                    {name:'Hp',index:'contact_mobile'},
                    {name:'Alamat',index:'contact_address'},
                    {name:'Detail',index:'detail', align:"center"}
                ],
                rowNum:10,
                rowList:[10,20,30],
                pager: '#grid-pager',
                rownumbers: true,
                viewrecords: true,
                multiboxonly: true,
                caption:"Data Member",

                loadComplete : function() {
                        var table = this;
                        setTimeout(function(){
                                updateActionIcons(table);
                                updatePagerIcons(table);
                                enableTooltips(table);
                        }, 0);
                },

                autowidth: true
            });

            jQuery('#grid-table').jqGrid('navGrid','#grid-pager',{edit:false,add:false,del:false});


            //navButtons
            jQuery('#grid-table').jqGrid('navGrid','#grid-pager',
                    { 	//navbar options
                            search: true,
                            searchicon : 'ui-icon-search orange',
                            refresh: true,
                            refreshicon : 'ui-icon-refresh green'
                    }
            )




            //unlike navButtons icons, action icons in rows seem to be hard-coded
            //you can change them like this in here if you want
            function updateActionIcons(table) {

                    var replacement =
                    {
                            'ui-icon-search' : 'ui-icon-search orange',
                            'ui-icon-refresh' : 'ui-icon-refresh green'
                    };
                    $(table).find('.ui-pg-div span.ui-icon').each(function(){
                            var icon = $(this);
                            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                            if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                    })

            }

            //replace icons with FontAwesome icons like above
            function updatePagerIcons(table) {
                    var replacement =
                    {
                            'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
                            'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
                            'ui-icon-seek-next' : 'icon-angle-right bigger-140',
                            'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
                    };
                    $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
                            var icon = $(this);
                            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                            if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                    })
            }

            function enableTooltips(table) {
                    $('.navtable .ui-pg-button').tooltip({container:'body'});
                    $(table).find('.ui-pg-div').tooltip({container:'body'});
            }

            //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

    });




    function cari(){
        var agentCode = $('#member_code').val();
        var agentName = $('#member_name').val();
        var addr = $('#contact_address').val();
        var regdate = $('#regdate').val();


        jQuery("#grid-table").jqGrid('setGridParam',{
            url:"<?php echo $this->url() ?>/../../jsondata/memberlist?code="+agentCode+"&name="+agentName+"&addr="+addr+"&regdate="+regdate
        }).trigger("reloadGrid");

    }


    function detail(memberid){

        $("#imgload").attr("src","../img/loading.gif");

        $('#account_num').val("");
        $('#account_name').val("");
        $('#amount').val("");
        $('#bank_name').val("");
        $('#bank_acc_no').val("");
        $('#bank_acc_name').val("");
        $('#bank_city_name').val("");
        
        $.ajax({
            type: 'GET',
            dataType: 'JSON',
            url: '<?php echo $this->url() ?>/../../jsondata/getaccount',
            data: {memberid: memberid},
            success: function(result){

                    $('#account_num').val(result.account_num);
                    $('#account_name').val(result.account_name);
                    $('#amount').val(result.amount);
                    $('#bank_name').val(result.bank_name);
                    $('#bank_acc_no').val(result.bank_acc_no);
                    $('#bank_acc_name').val(result.bank_acc_name);
                    $('#bank_city_name').val(result.bank_city_name);

                    $("#imgload").attr("src","../img/blank.jpg");
                 }
                 
            });

    }

</script>




